<template>
    <div>
      <a-form layout="inline" :model="queryModel" v-if="searchBox">
        <a-form-item label="搜索词">
          <a-input v-model:value="queryModel.keyWord" placeholder="请输入搜索关键字名称" />
        </a-form-item>
        <a-form-item label="状态" name="region">
          <a-select v-model:value="queryModel.status" placeholder="请选择岗位状态">
            <a-select-option value="0">禁止</a-select-option>
            <a-select-option value="1">正常</a-select-option>
          </a-select>
        </a-form-item>
        <a-space>
          <a-button type="primary" @click="getPosts">查询</a-button>
          <a-button @click="resetQuery">重置</a-button>
        </a-space>
      </a-form>
      <div class="functionBox">
        <a-space class="left">
          <a-button type="dashed" :icon="h(PlusOutlined)" @click="operator(0)">新增</a-button>
          <a-popconfirm title="是否要真的要批量删除这些岗位嘛!" @confirm="deletePost( rowsData.map(( item : Post) => item.id) )">
            <template #icon><question-circle-outlined style="color: red" /></template>
            <a-button type="dashed" :icon="h(MinusOutlined)" :disabled="rowsData.length <= 0" >删除</a-button>
          </a-popconfirm>

        </a-space>
        <a-space class="right">
          <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="getPosts()" />
          <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
        </a-space>
      </div>
      <div ref="basePoint" :style="`height: ${ windowHeight - elementToTopHight - 7 }px !important;`">
        <a-table
            :columns="columns"
            @resizeColumn="handleResizeColumn"
            :rowKey="( record : Post ) => record.id"
            :row-selection="{ onChange: selectData }"
            :pagination="false"
            :locale="{ emptyText: '暂无数据' }"
            :data-source="tableData"
            :scroll="{ y: ( windowHeight - elementToTopHight - 116 ) + 'px' }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'status'">
              <a-tag color="green" v-if="record.status == 1">正常</a-tag>
              <a-tag color="red" v-if="record.status == 0">禁止</a-tag>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-button type="link" @click="operator(1,record.id)">编辑</a-button>
              <a-popconfirm title="是否要真的删除这个岗位嘛!" @confirm="deletePost([ record.id ])">
                <template #icon><question-circle-outlined style="color: red" /></template>
                <a-button type="link">删除</a-button>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
        <div class="pagination">
          <a-pagination
              size="small"
              :disabled="total == 0"
              :total="total"
              show-size-changer
              @change="pageChange"
              show-quick-jumper />
        </div>
      </div>
      <a-modal
          width="420px"
          v-model:open="operatorStore.open"
          :title="operatorStore.cmd == 0 ? '新增岗位' : '编辑岗位'"
          @ok="submitOperator"
          @cancel="resetFrom">
        <a-form
            :model="post"
            labelAlign="right"
            :label-col="{ style: { width: '80px' } }"
            :rules="rules"
            ref="formRef"
        >
          <a-form-item label="岗位名称" name="name">
            <a-input v-model:value="post.name" placeholder="请输入岗位名称" />
          </a-form-item>
          <a-form-item label="岗位编号" name="code">
            <a-input v-model:value="post.code" placeholder="请输入岗位编号" />
          </a-form-item>
          <a-form-item label="岗位顺序" name="sortOrder">
            <a-input type="number" v-model:value="post.sortOrder" placeholder="请输入岗位顺序" />
          </a-form-item>
          <a-form-item label="岗位状态">
            <a-radio-group v-model:value="post.status">
              <a-radio :value="0">禁止</a-radio>
              <a-radio :value="1">正常</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="备注">
            <a-textarea v-model:value="post.remark" placeholder="可以尝试输入一些岗位的描述..." :rows="4" />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>

</template>

<script setup lang="ts">
    import usePost from "@/hooks/usePost";
    import { h , ref , reactive } from "vue";
    import {
      PlusOutlined,
      ReloadOutlined,
      SearchOutlined,
      QuestionCircleOutlined,
      MinusOutlined
    } from "@ant-design/icons-vue";
    import DynamicHeight from "@/utils/DynamicHeight";
    import type {Post} from "@/interface/Post";
    const { basePoint , windowHeight , elementToTopHight } = DynamicHeight();
    const {
      queryModel , searchBox , getPosts ,
      resetQuery , columns , handleResizeColumn,
      tableData , total , pageChange , operator ,
      operatorStore , post ,  rules , submitOperator ,
      resetFrom , formRef , deletePost , selectData ,
      rowsData
    } = usePost();



</script>

<style scoped lang="scss">
    .functionBox {
      margin: 18px 0 12px 0;
      display: flex;
      justify-content: space-between;
    }
    .pagination {
      margin: 8px 0;
      display: flex;
      justify-content: end;
    }
</style>
